<template>
	<view class="box">
		<page-head :transparent='false'><slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot></page-head>
		<view class="img1">
			<image class="img" src="../../../static/img/guidance/1_01_01.jpg" mode="widthFix"></image>
		</view>
		<view class="img2">
			<image class="img_ab" src="../../../static/img/guidance/1_01_02.jpg" mode="widthFix"></image>
		</view>
		<view class="img3">
			<image class="img" src="../../../static/img/guidance/1_01_03.jpg" mode="widthFix"></image>
			<span class="url">http://down.sqqmall.com</span>
		</view>
		<view class="img4">
			<image class="img_ab" src="../../../static/img/guidance/1_01_04.jpg" mode="widthFix"></image>
			<video id="myVideo" :src="videoUrl" @error="videoErrorCallback" controls></video>
		</view>
		<view class="img2">
			<image class="img_ab" src="../../../static/img/guidance/1_01_05.jpg" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoUrl:'https://sqqmall.oss-cn-shenzhen.aliyuncs.com/1.mp4',
				title: '新版本下载链接'
			}
		},
		methods: {
			videoErrorCallback: function(e) {
				console.log(123)
				uni.showModal({
					content: '视频出错，请稍后重试!',
					showCancel: false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 100%;
		
		.img1{
			width: 100%;
			
			.img{
				display:block;
				width: 100%;
			}
		}
		
		.img2{
			width: 100%;
			position: relative;
			
			.img_ab{
				margin-top: -2px;
				display:block;
				width: 100%;
			}
		}
		
		.img3{
			width: 100%;
			margin-top:-2px;
			position: relative;
			.img{
			 	display:block;
			 	width: 100%;
			}
			.url{
				-webkit-touch-callout: all;
				-webkit-user-select: all;
				-moz-user-select: all;
				-ms-user-select: all;
				user-select: all;
				position: absolute;
				top: 50%;
				left: 22%;
				font-size: 40px;
			}
		}
		
		.img4{
			width: 100%;
			position: relative;
			
			.img_ab{
				margin-top: -2px;
				display:block;
				width: 100%;
			}
			#myVideo{
				width: 500px;
				height: 300px;
				position: absolute;
				z-index: 5;
				top: 20%;
				left: 16%;
			}
		}
	}
	
</style>
